<template>
    <div class="school-content">
        <TableLayoutes form-title="">
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="dataApply" border v-loading="loading" style="width: 100%"  ref="multipleTable">
                <el-table-column prop="schoolName" align="center" label="学校名称" width="200">
                        <template scope="scope">
                            <span>{{scope.row.schoolName | isNull}}</span>
                        </template>
                </el-table-column>
                
                <el-table-column prop="schoolType" align="center" label="学校类型" width="120" >
                        <template scope="scope">
                            <span>{{scope.row.schoolType | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="所属地区" align="center">
                    <template scope="scope">
                        <span>{{scope.row.provinceName}}-{{scope.row.cityName}}-{{scope.row.areaName}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="详细地址" align="center" prop="detail">
                         <template scope="scope">
                            <span>{{scope.row.detail | isNull}}</span>
                        </template>
                </el-table-column>
                
                <el-table-column label="创建时间" align="center" prop="createTime" width="170"> 
                        <template scope="scope">
                            <span>{{scope.row.createTime | isNull}}</span>
                        </template>
                </el-table-column>
                
                <el-table-column align="center" label="创建人" prop="creator" width="140">
                        <template scope="scope">
                            <span>{{scope.row.creator | isNull}}</span>
                        </template>
                </el-table-column>

                <el-table-column label="负责人信息" align="center" width="140">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="goDetail(scope.row.schoolId)">详情</el-button>
                    </template>                 
                </el-table-column>
                
                <el-table-column align="center" label="科目" width="140">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="subjectDet(scope.row)">详情</el-button>
                    </template>
                </el-table-column>

                  <el-table-column label="其他操作" width="140">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="modify(scope.row.schoolId)">修改</el-button>
                    </template>
                </el-table-column>       
            </el-table>
            <div style="height:26px;"></div>
        </TableLayoutes>
        <subjectDetail :dialog="dialog" v-if="dialog.dialogFormVisible"></subjectDetail>
    </div>
</template>

<script>
import { getSchoolInfo} from 'api/schoolManage';
import TableLayoutes from 'components/TableLayoutes';
import { mapGetters, mapState } from 'vuex';
import subjectDetail from './subjectDetail';

export default{
    components: { subjectDetail, TableLayoutes},
    data() {
        return {
            loading: false,
            dialog: {
                dialogFormVisible: false,
                pid: ''
            },
            dataApply: []
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    computed: {
        ...mapGetters([
            'schoolId',
            'schoolName'
        ]),
        ...mapState({
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        })

    },
    // 初始化
    created() {
        this.searchFetchData();
    },
    
    methods: {

        // 查询列表  
        searchFetchData() {
            this.loading = true;
            getSchoolInfo(this.schoolId, this.schoolName).then(response => {
                this.loading = false;
                this.dataApply = [response.data.content];
            });
        },
        subjectDet(row) {
            this.dialog.id = row.schoolId;
            this.dialog.dialogFormVisible = true;
        },
        // 修改学校信息
        modify(row) {
            this.$router.push({path: `modifySchool/${row}`});
        },
        // 跳转
        goDetail(row) {
            this.$router.push({path: `leaderInfo/${row}`});
        }

    }
}
</script>
<style lang="scss">
.school-content {
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .tabelLayout-content {
        .table-box{
            margin:0;
        }
    }
}

</style>